<template>
    <div class="cart">
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
            <el-breadcrumb-item>购物车</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 需要先判断是否登录，未登录状态提示用户登录 -->
        <div v-if="profile.token"><CartInfo /></div>
        <div v-else><NotLogin /></div>
    </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import NotLogin from './components/not-login.vue'
import CartInfo from './components/cart-info.vue'
import { userStore } from '@/stores/user'
import { computed } from 'vue'
const useUserStore = userStore()
let profile = computed(() => {
    return useUserStore.profile
})
</script>

<style lang="scss" scoped>
.cart {
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    --el-color-primary: #da9233;
}
.el-breadcrumb {
    margin-bottom: 15px;
    margin-right: 1140px;
}
</style>
